Back to Contents        Previous        Next






16. Bars and Sliders**

When you format a floppy disc a horizontal coloured bar increases in size to show the amount of the disc that has been formatted so far. Similarly, when you look at the free space on a floppy or hard drive you have several bars to show you how much space has been used up, how much is free, and what there is in total. In these examples the user cannot interact with the grapical bar: it is a ‘passive’ display.

Conversely, when you use the Colour Picker (in, say, !Draw) the idea of a graphical bar is taken further, because there the user can move the bar in order to set a particular colour i.e. the display is ‘interactive’.

In Dr Wimp, the difference between these two types of graphical bar display is recognised by calling the passive display a ‘bar’ and and the interactive display a ‘slider’ - and Dr Wimp has facilities to handle both.


Bars
In structure, bars are only long, thin icons filled with a colour. DrWimp allows the length (or height) of bars to be changed. This means, for instance, that they can be changed continuously or only just before a window containing them is opened.

For our tutorial, make a fresh copy of the master skeleton !MyApp. From the Tutorial folder (Tutor2 sub-directory) drag the “Template5” file into the !MyApp directory, and rename it as “Templates”.

Then add the following lines to PROCuser_initialise in !RunImage:

main%=FNwimp_loadwindow(“<MyApp$Dir>.Templates”,“main”,0)
iconbar%=FNwimp_iconbar(“!MyApp”,“”,0,1)
iconbarmenu%=FNwimp_createmenu(“MyApp/Quit”,0)

and in PROCuser_mouseclick:

IF window%=iconbar% THEN PROCwimp_openwindow(main%,1,-1)

and in FNuser_menu:

return%=0
IF window%=iconbar% THEN return%=iconbarmenu%
=return%

and in PROCuser_menuselection:

IF menu%=iconbarmenu% AND item%=1 THEN PROCwimp_quit(0)

If you now double-click on !MyApp you should get an icon on the iconbar with a menu with a ‘Quit’ item. Clicking on the icon should produce a small window with a red bar in it.

What we are now going to do is set the bar to a random length when it is clicked on. First we need to know what the maximum length of the bar is, so load the templates into !WinEd by dropping the file onto !WinEd’s iconbar icon.

In !WinEd’s main window, double-click on ‘main’. Move the pointer over the bar and look at WinEd’s ‘Monitor’ window.

The ‘Monitor’ window shows that the bar’s icon number is 1 and that the icon’s dimensions are 340x36, so the max length is 340.

Take a look at all the details of the bar icon by double-clicking on it in the !WinEd display. This is how you should set up any icons you want to use as bars. Obviously you can change the size, colour and turn the border on, etc.

(Dr Wimp has a wimp-function to tell you the size of icons in a loaded window without using !WinEd, but the above method was chosen here so that you could see the other icon details.)

Returning to !RunImage, add the following line to PROCuser_mouseclick:

IF window%=main% THEN PROCchangelength

Now add the following function to the end of !RunImage:

DEF PROCchangelength
len%=RND(340)
PROCwimp_bar(main%,1,len%,0)
ENDPROC


Re-load !MyApp, and click on the bar or the frame icon behind it. You will see the bar jump to a different (random) length each time you click.

If you want to specify the length as a percentage, just alter PROCchangelength to:

DEF PROCchangelength
len%=RND(100)
len=(340/100)*len% :REM** To factor the bar length correctly. **
PROCwimp_bar(main%,1,len,0)
ENDPROC


As you can see, len% is a percentage chosen at random. (Note change to len from len% in PROCwimp_bar(). )

You can change the bar to look like however you want it, but we would advise against adding any text, sprites, or indirected text.

One thing you might like to do is add a border around the bar by clicking on the “Border” icon in the relevant !WinEd window. However, if the bar is going to be changing in size rapidly then the part of the border at the right edge may flicker a lot as that part of the screen is constantly redrawn.

If you want the bar to be a vertical one, i.e. it resizes vertically instead of horizontally, then set the fourth parameter of PROCwimp_bar to 1 instead of 0.

And just to finish off, to get an animated bar (without any explanation, at the moment!) alter PROCchangelength to:

DEF PROCchangelength
pcent%=0
REPEAT
         nlen=(340/100)*pcent%
         PROCwimp_bar(main%,1,nlen,0)
         PROCwimp_singlepoll
         pcent%+=1
UNTIL pcent%>100
ENDPROC


Now when you run the application the bar increases fairly smoothly from 0 to 100%.

You should be able to see that it is now the basis for an ‘internal multitasking’ operation with the percentage done depicted by the bar. See Section 2.26 for further insight into multitasking.


[Your !RunImage listing should now look like listing RI_09 in Tutor2 (apart from the REM lines, perhaps). Do not destroy it as the following sections continue the tutorial from this stage.]


(See the end of this Section for some general comments on the practical use of bars/sliders.)



Sliders


Structurally, sliders consist of three icons, and must be constructed in a certain way in order to work properly:

Picture Pics/pic008.png

The ‘slider back’ icon goes completely under the ‘slider’ icon, and defines the total area over which the slider can be dragged. The slider and slider back icons must both have a button type of “Click/Drag”, be filled and have no borders. They can be any thickness, length or colour you like.

Continuing with our tutorial, copy the file “Template6” from the Tutorials folder (Tutor2 sub-directory) into !MyApp and rename to “Templates”.

Load Templates into !WinEd and note that in the window ‘slide’ there are two sliders with associated text icons. Check how the sliders are constructed in detail and make a note of the various icon numbers.


Now, in the tutorial !RunImage, delete (or, better, type REM at the start of) the line where the main window is loaded and after it add:

slide%=FNwimp_loadwindow("<MyApp$Dir>.Templates","slide",0)

Alter the window%=iconbar% part in PROCuser_mouseclick so that is is like:

IF window%=iconbar% THEN PROCwimp_openwindow(slide%,1,-1)

Run !MyApp and you will see that the slider window that appears has two sliders in it. Currently they do nothing.


In the same way that FNuser_savefiletype makes save windows work as soon as some value is returned for them, sliders work as soon as you return relevant values from two related user-functions:

FNuser_sliderback()
FNuser_slider()

FNuser_sliderback
is used to tell the Wimp which slider back icon is linked with which slider icon. For the top slider, the slider is icon number 2, and the slider back icon is icon number 1.

So add the following line to FNuser_sliderback:

return% = -1 :REM** Note this ‘empty’ value, as icons can have the number 0. **
IF window%=slide% AND icon%=2 THEN return%=1
=return%


To complete the pairing, FNuser_slider must also be used to return the icon number of the slider icon, when given the slider back icon number. So, add the following complementary line to FNuser_slider:

return% = -1
IF window%=slide% AND icon%=1 THEN return%=2
=return%

Hopefully that should be clear, and running !MyApp will now enable you to click on the top slider or the slider back to make it jump to various positions. You can also drag the slider left and right.

The basics are as simple as that.

But a slider is no good unless you can get a value for it.........

When a slider is moved or dragged,

PROCuser_slidervalue(window%,icon%,pcent%,direction%)

is called automatically, and the percentage of the slider concerned (and its direction, hor/vert) is passed to you in its parameters. So add the following lines to this user-function:

IF window%=slide% AND icon%=2 THEN
         PROCwimp_puticontext(slide%,3,STR$(pcent%))
ENDIF


STR$(pcent%) converts the percentage to a string, suitable for passing to PROCwimp_puticontext. Icon number 2 is the slider icon and icon 3 is its associated text icon.

Run the application now and you will see the percentage displayed in the box on the right as the slider is moved.

Add the following line to FNuser_sliderback():

IF window%=slide% AND icon%=6 THEN return%=5

and this line to FNuser_slider():

IF window%=slide% AND icon%=5 THEN return%=6


and finally these lines to PROCuser_slidervalue():

IF window%=slide% AND icon%=6 THEN
         PROCwimp_puticontext(slide%,7,STR$(pcent%))
ENDIF

The bottom slider should now also work, independently.

The percentage can be scaled up or down so different ranges can be used, e.g. 0-255.

Also, the current static percentage of a slider can be read using FNwimp_getsliderpcent and the percentage of a slider can be set using PROCwimp_putsliderpcent. Try these out to see their effect.

Vertical sliders can also be made. If the slider is made higher than it is wide, then DrWimp will automatically assume its a vertical slider.


[Your !RunImage listing should now look like listing RI_10 in Tutor2 (apart from the REM lines, perhaps). This listing is not altered further. When the tutorial is picked up again - in Section 2.26 - a fresh !MyApp will be started.]

Additional comments about bars and sliders

- The example applications !Bar and !Sliders show typical usage.
- In addition, these example applications both introduce ‘
nudgers
’/’
bump icons
(the Style Guide calls them ’adjuster arrows’) which are often used to complement sliders/bars by providing a means to fine-tune values set with a slider/bar. The listings will show that ’bump icons’/‘nudgers’ are simple to implement using standard Basic statements - and Dr Wimp also has ‘Elixir_05’ to provide a flexible standardised coding.
- The example applications also demonstrate some of the practical issues in using sliders/bars - not unique to Dr Wimp. For instance, it is often not possible to use the mouse pointer accurately enough to set every value in the slider/bar range (hence the need for ‘nudgers’/’bump icons’).





Top of page        Back to Contents        Previous        Next